<template>
    <div style="background: #F7F7F7">
      <div v-if="chenload">
				<div style="background: #fff;overflow: hidden"  v-if="feeRecordarr.length!=0||feeRecordarr.length!='0'">
					<div style="margin-top: 0.2rem;overflow: hidden">
						<mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail">
							<div>
								<div class="con" v-for="(item,index) in feeRecordarr">
									<p>{{item.good_name}}</p>
									<p>
										<span>{{item.addtime}}</span>
										<span>消费: ¥{{item.amount}}</span>
									</p>
									<p></p>
								</div>
							</div>
						</mt-loadmore>
					</div>
				</div>
				<div v-else class="chen-kongbai">
					<div class="chen-kongpic">
						<img src="../../../src/assets/img/kongbai.png" mode=""></img>
					</div>
					<div class="chen-kong-text"><span>暂无该客户详情</span></div>
				</div>
			</div>
			<div class="loadmore" v-else>
			  <img src="../../../src/assets/img/load.gif" alt="">
			</div>
    </div>
  
</template>

<script>
    export default {
        name: "Khxiaofei",
      data(){
          return{
						chenload:false,
						allLoaded:false,
            arr:['1','1','1'],
						page:1,
						feeRecordarr:[],
          }
      },
			methods:{
				loadBottom(){
					this.allLoaded = true;// if all data are loaded
					
					this.page++;
					this.feeRecord(1);
				},
				// 消费记录
				feeRecord(type){
						 var that = this;
						 that.axios.get(that.$store.state.url + "User/myRecomInfo",{
							 params:{
								page:that.page,
							 }
						 }).then(res=>{
							 that.chenload=true;
							 if (res.data.errcode == 0||res.data.errcode == '0'){
								// this.money = res.data.data.money
									var order = res.data.data.orders;
									if (that.page == 1){
										that.feeRecordarr = order;
									}else{
										that.feeRecordarr = that.feeRecordarr.concat(order);
									}
									if(type==1||type=='1'){
										this.$refs.loadmoredetail.onBottomLoaded();
										this.allLoaded = false;
									}
								
							 }
						 })
				}
			},
			mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
				this.feeRecord(0);
			}
    }
</script>

<style scoped>
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
  .con{
    width: 92%;
    margin: auto;
  }
  .con p:nth-child(1){
    width: 5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(51,51,51,1);
    margin-top: 0.4rem;
  }
  .con p:nth-child(2){
    margin-top: 0.3rem;
  }
  .con p:nth-child(2) span:nth-child(1){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
  }
  .con p:nth-child(2) span:nth-child(2){
    font-size:0.26rem;
    color:rgba(51,51,51,1);
    float: right;
  }
  .con p:nth-child(3){
    width: 100%;
    height: 0.02rem;
    background: #EDEDED;
    margin-top: 0.4rem;
  }
</style>
